<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin:0;padding:0;}
  </style>
</head>
<body>
  
</body>
<script type="importmap">
  {
		"imports": {
			"three": "../build/three.module.js",
      "OrbitControls": "../examples/jsm/controls/OrbitControls.js",
      "gui":"../examples/jsm/libs/lil-gui.module.min.js"
		}
	}
</script>
<script type="module">
  import * as THREE from 'three';
  // 引入相机轨道控制器
  import { OrbitControls } from 'OrbitControls';
  import { GUI } from 'gui';

  // 创建场景
  const scene = new THREE.Scene()

  // 创建透视相机：具备近大远小
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();

  // 开启渲染器的阴影设置
  renderer.shadowMap.enabled = true;

  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // =========

  // 创建一个地板几何，用于接收阴影
  const floorGeogemtry =  new THREE.PlaneGeometry(30,30);
  const floorMaterial = new THREE.MeshLambertMaterial({
    color: 0xffffff
  })
  const floor = new THREE.Mesh(floorGeogemtry, floorMaterial )
  floor.rotateX(-Math.PI/2); // 平放

  // 设置地板接收阴影的投射
  floor.receiveShadow = true;

  scene.add(floor); // 把网格模型 添加到场景中


  // 创建一个几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 设置材质
  const material = new THREE.MeshBasicMaterial({
      color: 0xff6600,
  })
  const cube = new THREE.Mesh(geometry,material );

  cube.position.set(2, 2, 2);
  cube.castShadow = true;

  scene.add(cube); // 把网格模型 添加到场景中


  // =========


  // 修改相机位置
  camera.position.z = 5;

  // 创建坐标系辅助器
  const axesHelper = new THREE.AxesHelper(150);
  scene.add(axesHelper);
  // 创建辅助线（地面）
  const gridHelper = new THREE.GridHelper(10,10);
  scene.add(gridHelper);

  // 创建点光源
  const pointLight = new THREE.PointLight( 0xffffff, 1 );
  pointLight.position.set(50, 50, 50); 
  scene.add( pointLight ); 
  // 配置当前光源对阴影的影响
  pointLight.castShadow = true;
  // 默认的阴影效果有时候会比较差 我们可以通过修改阴影贴图的大小来让它的效果进行优化
  // 通过修改阴影贴图的大小来优化 ( 默认是512*512 )
  pointLight.shadow.mapSize.width = 1024;
  pointLight.shadow.mapSize.height = 1024;
  // 可以给阴影设置一个边缘模糊
  pointLight.shadow.radius = 3;

  // 创建平行光
  // 平行光源一般是用来模拟大自然当中的 阳光直射的效果
  // const directLight= new THREE.DirectionalLight( 0xffffff, 0.5 );
  // // 光源的位置
  // directLight.position.set(50, 50, 50);
  // // 对于光线我们也要开启 castShadow 才能产生阴影效果
  // directLight.castShadow = true;
  // scene.add( directLight );

  // 创建聚光灯
  // const spotLight = new THREE.SpotLight( 0xffffff );
  // spotLight.position.set(50, 50, 50);
  // spotLight.castShadow = true;
  // scene.add( spotLight );


  // 创建光源辅助器
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 20);
  scene.add(pointLightHelper);

  // scene.add( new THREE.SpotLightHelper(spotLight) )

  // scene.add( new THREE.DirectionalLightHelper(directLight,5) )

  // 将3D场景和相机都添加到渲染器中（在canvas内绘制）
  renderer.render( scene, camera );

  // 创建 相机控件轨道控制器 实例
  const controls = new OrbitControls( camera, renderer.domElement );
  // 监听相机轨道改变事件
  controls.addEventListener('change',()=>{
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    // 执行渲染操作
    renderer.render(scene, camera);
  })

</script>
</html>